<!--
 * @FileDescription: 主页面 - 梯控 抽屉弹框
 * @Author: Ronghao Zhu
 * @CreateTime: 2020/09/07 星期一
 * @LastEditors: Ronghao Zhu
 * @LastEditTime: 2020/09/07
-->

<template>
  <div class="elevator-container">
    <el-row type="flex" justify="center" style="margin-bottom: 15px">
      <el-radio-group v-model="formInline.fireTType" @change="getList(1)">
        <el-radio-button :label="-1">全部</el-radio-button>
        <el-radio-button :label="10">触发</el-radio-button>
      </el-radio-group>
    </el-row>
    <el-row type="flex" justify="center">
      <el-form class="serach-form" :model="formInline" :inline="true" @submit.native.prevent @keyup.enter.native="getList(1)">
        <el-form-item class="form-item1">
          <el-input v-model="formInline.name" clearable placeholder="请输入搜索内容"></el-input>
        </el-form-item>

        <el-form-item class="form-item2">
          <el-button class="form-search-btn" type="primary" plain @click="getList(1)">搜索</el-button>
        </el-form-item>

        <el-form-item class="form-item3">
          <el-select v-model="formInline.orgIds" placeholder="请选择单位">
            <el-option v-for="(item,index) in orgList" :key="index" :label="item.shortName" :value="item.organizationId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="fbsId" class="form-item4">
          <tree-select
            v-model="formInline.fbsId"
            placeholder="请选择场所"
            filterable
            :width="240"
            :data="buildList"
            :defaultProps="buildDefaultProps"
            :checkedKeys="defaultCheckedFbsId"
            :nodeKey="buildNodeKey"
          ></tree-select>
        </el-form-item>
      </el-form>
    </el-row>
    <el-tabs v-model="formInline.fcfCategoryId" type="card" @tab-click="handleTabClick">
      <el-tab-pane v-for="n in typeList" :key="n.id" :label="n.name" :name="n.id.toString()"></el-tab-pane>
    </el-tabs>
    <app-list
      :formInline="formInline"
      :tableData="tableData"
      :getList="getList"
      :operate="operate"
      v-loading="loading"
    ></app-list>
  </div>
</template>

<script>
import AppList from './RemoteControllerList'
import TreeSelect from '@/libs/TreeSelect/Main'
import {
  getFcfStatusList,
  alarmCallById,
  getSendCommandFcsCategoryList,
} from '@/api/fcf'
import { getOrgList } from '@/api/org'
import { getFbsTree } from '@/api/fbs'

export default {
  name: 'ElevatorController',
  components: {
    AppList,
    TreeSelect,
  },
  props: {},
  data() {
    return {
      formInline: {
        orgIds: this.$store.state.userinfo.organizationIds,
        systemId: '-1',
        fcfCategoryId: '',
        fbsId: 0,
        name: '',
        fireTType: -1,
        queryType: 1,
        pageIndex: 0,
        pageSize: 10,
      },
      tableData: {}, // 接口返回的数据
      loading: false, // 加载状态
      orgList: [
        {
          organizationId: this.$store.state.userinfo.organizationIds,
          shortName: '全部业主单位',
        },
      ], // 单位集合下拉框
      buildList: [],
      buildDefaultProps: {
        children: 'nodes',
        label: 'text',
        value: 'id',
      },
      defaultCheckedFbsId: [],
      buildNodeKey: 'id',
      typeList: [],
    }
  },
  watch: {
    /* 监听选择单位 */
    'formInline.orgIds': {
      handler(newVal, oldVal) {
        if (
          newVal &&
          newVal !== oldVal &&
          String(newVal).split(',').length === 1
        ) {
          this.getFbsTree()
          this.getList(1)
          this.formInline.fbsId = ''
          this.defaultCheckedFbsId = []
        } else {
          this.buildList = []
          this.formInline.fbsId = ''
          this.defaultCheckedFbsId = []
          this.getList(1)
        }
      },
      deep: true,
    },
    /* 监听选择场所 */
    'formInline.fbsId': {
      handler(newVal, oldVal) {
        if (!newVal) this.formInline.fbsId = ''
        if (newVal && newVal !== oldVal) this.getList(1)
      },
      deep: true,
    },
  },
  created() {
    this.getOrgList()
    this.getSendCommandFcsCategoryList()
  },
  methods: {
    getSendCommandFcsCategoryList() {
      getSendCommandFcsCategoryList().then((res) => {
        this.typeList = res.data.map((n) => {
          n.id = n.id.toString()
          return n
        })
        if (res.data.length > 0) {
          this.formInline.fcfCategoryId = res.data[0].id
        }
        this.getList(1)
      })
    },
    handleTabClick() {
      this.getList(1)
    },
    async getList(_pageIndex, _pageSize) {
      try {
        this.tableData = {}
        this.loading = true
        if (_pageIndex) this.formInline.pageIndex = _pageIndex - 1
        if (_pageSize) this.formInline.pageSize = _pageSize
        const res = await getFcfStatusList(this.formInline)
        if (res.status === 200) {
          this.tableData = res
          this.loading = false
        } else {
          this.$message.error(res.info)
        }
      } catch (err) {
        // console.log(err);
      }
    },
    /* 获取单位下拉框 */
    async getOrgList() {
      try {
        const res = await getOrgList({ queryType: 0 })
        if (res.status === 200) {
          this.orgList = res.data
          this.orgList.unshift({
            organizationId: this.$store.state.userinfo.organizationIds,
            shortName: '全部业主单位',
          })
        } else {
          this.$message.error(res.info)
        }
      } catch (err) {
        // console.log(err);
      }
    },
    /* 获取场所 */
    async getFbsTree() {
      try {
        const res = await getFbsTree({
          organizationId: this.formInline.orgIds,
        })
        if (res.status === 200) {
          this.buildList = res.data
        } else {
          this.$message.error(res.info)
        }
      } catch (err) {
        // console.log(err);
      }
    },
    operate(row,alarmType) {
      this.hideEdit({
        facId:row.id,
        alarmType,
      })
    },
    hideEdit(params) {
      alarmCallById(params).then((res) => {
        if (res.status === 200) {
          this.$message.success('操作成功！')
          this.getList(1)
        } else {
          this.$message.error(res.info)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.elevator-container {
  position: relative;
  padding: 0 20px;
  height: 100%;
  .form-item1 {
    width: calc(100% - 85px);
    /deep/ .el-form-item__content {
      width: 100%;
    }
  }
  .form-item2 {
    margin-right: 0;
  }
  .form-item3 {
    width: calc(50% - 8px);
    /deep/ .el-form-item__content {
      width: 100%;
    }
  }
  .form-item4 {
    width: calc(50% - 8px);
    margin-right: 0;
    /deep/ .el-form-item__content {
      width: 100%;
    }
    /deep/ .tree-select {
      width: 100% !important;
    }
  }
}
</style>
